<template>
  <div class="search">
    <!-- 搜索框部分 开始 -->
    <div class="search_input">
      <input type="text" @keyup.enter="toSearch" v-model="inputText" placeholder="请输入想去的地方，比如: 广州" />
      <i class="el-icon-search" @keyup.enter="toSearch" @click="toSearch"></i>
    </div>
    <!-- 搜索框部分 结束 -->

    <!-- APP下载部分 开始 -->
    <div class="app">
      <div class="img">
        <img src="../../assets/images/微信图片_20200909122326.png" alt />
      </div>
      <div class="app_eclipse">
        <div class="eclipse cursor" @click.prevent="promptUser">闲云自由行APP下载</div>
        <div class="edition">
          <a href="#" @click.prevent="promptUser">iPhone版</a>
          <span>|</span>
          <a href="#" @click.prevent="promptUser">Android版</a>
          <span>|</span>
          <a href="#" @click.prevent="promptUser">iPad版</a>
        </div>
      </div>
    </div>
    <!-- APP下载部分 结束 -->

    <!-- 推荐城市 开始  -->
    <div class="recommend_city">
      <div class="recommend">推荐城市 :</div>
      <div
        class="city-list"
        v-for="(item,index) in cityList"
        :key="index"
        @click="recommendCity(item)"
      >
        <span class="num">{{index + 1}}</span>
        <span class="city cursor">{{item}}</span>
      </div>
    </div>
    <!-- 推荐城市 结束  -->
  </div>
</template>

<script>
export default {
  props: ["city"],
  data() {
    return {
      inputText: "",
      cityList: [
        // 推荐的城市
        "广州",
        "上海",
        "北京",
        "江西",
        "广西",
        "长沙",
        "青岛",
        "湖南",
      ],
    };
  },
  watch: {
    city(val) {
      console.log(val);
      this.inputText = val;
    },
  },
  mounted(){
    if(this.$route.query.city){
      this.inputText = this.$route.query.city
    }
  },
  methods: {
    // 点击搜索
    toSearch() {
      this.$emit("btnSearch", this.inputText);
    },
    // 推荐城市的搜索
    recommendCity(item) {
      // console.log(item);
      this.$emit("recommendSearch", item);
      this.inputText = item;
    },
    // 下载app提示用户尚未推出
    promptUser() {
      this.$confirm("手机APP尚未推出，请敬请期待！", "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
        type: "warning",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cursor {
  cursor: pointer;
}
.search {
  // 搜索框
  .search_input {
    width: 100%;
    height: 44px;
    border: 2px solid #ffa500;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    input {
      height: 38px;
      flex: 1;
      border: 0;
      outline: none;
      padding-left: 20px;
      box-shadow: none;
      font-size: 12px;
    }
    .el-icon-search {
      font-size: 26px;
      font-weight: 600;
      color: #ffa500;
      margin: 0 15px;
    }
  }

  // APP 下载
  .app {
    height: 65px;
    display: flex;
    align-items: center;
    margin: 20px 0 47px 0;
    border-bottom: 1px solid #e3e3e3;
    box-sizing: border-box;
    padding-bottom: 15px;
    .img {
      width: 50px;
      height: 50px;
      margin-right: 15px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        object-fit: cover;
      }
    }
    .app_eclipse {
      .eclipse {
        font-size: 16px;
        font-weight: 500;
        color: #ff9d00;
        margin-bottom: 5px;
        &:hover {
          text-decoration: underline;
        }
      }
      .edition {
        font-size: 12px;
        color: #666;
        font-weight: 400;
        span {
          color: #d8d8d8;
          height: 12px;
          width: 2px;
          line-height: 14px;
          padding: 0px 4px;
          overflow: hidden;
        }
      }
    }
  }

  // 推荐城市部分样式 开始
  .recommend_city {
    .recommend {
      height: 50px;
      font-size: 16px;
      color: #333;
      border-bottom: 1px solid #eee;
      line-height: 48px;
    }
    .city-list {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f7f7f7;
      padding: 15px 0;
      .num {
        font-size: 20px;
        color: #ff9d00;
        font-weight: 500;
        margin-right: 10px;
      }
      .city {
        color: #000;
        font-size: 14px;
        font-weight: 400;
        &:hover {
          color: #ff9d00;
          text-decoration: underline;
        }
      }
    }
  }
  // 推荐城市部分样式 结束
}
</style>